<script lang="ts" setup>
import SearchArea from '@/component/Search/SearchArea.vue'
import SiteList from '@/component/SiteList/SiteList.vue'
import { useSiteGroupStore } from '@/config/store/UseSiteGroupStore.ts'
import { storeToRefs } from 'pinia'

const siteGroupStore = useSiteGroupStore()
const { groupList, currentGroup } = storeToRefs(siteGroupStore)

const refMapping: Record<string, InstanceType<typeof SiteList>> = {}

const onSiteListChange = (changeGroups: Array<string>) => {
    for (const groupId of changeGroups) {
        refMapping[groupId]?.initList()
    }
}

</script>

<template>
<SearchArea />

<div class="site-group">
    <template v-for="group in groupList" :key="group.id!">
        <SiteList
                v-show="group.id === currentGroup"
                :ref="(v: any) => refMapping[group.id!] = v"
                :group-id="group.id!"
                @change="onSiteListChange"
        />
    </template>
</div>
</template>

<style lang="scss" scoped>
.site-group {
    height: var(--site-group-height);
    padding: 0 50px;
    overflow-x: hidden;
    overflow-y: auto;
}
</style>
